<template>
  <!-- <div class="mycard"
       v-show="isbind"> -->
  <div>
    <div class="mycard"
         v-if="isbind">
      <group label-width="7em"
             label-margin-right="2em"
             label-align="right"
             gutter='0'>
        <cell title="姓名"
              value-align="left">{{user.realName}}</cell>
        <cell title="性别"
              value-align="left">{{user.gender}}</cell>
        <cell title="手机号"
              value-align="left">{{user.userMobile}}</cell>
        <cell title="身份证号"
              value-align="left"
              v-model="identityCard">{{user.identityCard}}</cell>
        <!-- <cell title="会员卡类型"
            value-align="left">{{user.vipCardType |type }}</cell> -->
        <cell title="会员卡卡号"
              value-align="left">{{user.cardNumber}}</cell>
        <cell title="今年可用次数"
              value-align="left"
              v-model="residueTimes">{{user.residueTimes}} 次</cell>
        <cell title="总剩余次数"
              value-align="left"
              v-model="residueTimes">{{user.totalResidueTimes}} 次</cell>
        <cell title="到期时间"
              value-align="left"
              v-model="residueTimes">{{user.endTime}}</cell>
      </group>
      <div class="btn flex active"
           v-show="btnShow"
           @click="untying">
        解绑
      </div>
      <div class="notice pd40 col_999">
        <p>注意事项:</p>
        <p> 开卡流程：
          <p> 1.购买旅住卡后，2月4日按照付款先后顺序发货，顺丰发货。</p>
          <p> 2.旅住卡仅限本人使用，以绑定的身份证信息为准，只有开卡者本人在现场登记入住才享受旅住卡权益。</p>
          <p> 3.3月15日开放民宿客房预订，不支持电话预定，只接受网络预订，预订平台仅限XXX微信公众号平台。开放线上订房系统后，根据要求填写相关信息，完成对应操作即可。</p>
          <p> 4.旅住卡预定网络平台上的所有房型（独栋别墅除外）只要房源空置都可以预定。</p>
          <p> 5.一张卡一天只能享受一个房间优惠政策，但可连续入住（需提前网络预订）。</p>
          <p> 6.每个房间入住人数，入住规定等必须严格遵守国家酒店管理条例。</p>
          <p> 7.旅住卡以持卡者第一次办理入住计算开始时间，后续三年享受开卡权益，若三年内未绑定身份信息入住则此卡作废。</p>
          <p> 8.旅住卡有实体卡和电子卡两种形式，入住只需出示一种即可，绑定身份信息后，若卡遗失可申请补办，若遗失旅住卡者未注册电子会员卡或绑定身份信息，不予补办，后果自负。</p>
      </div>
      <confirm v-model="confirmshow"
               :show-cancel-button="false"
               title="提示"
               @on-confirm="$router.push('/my')">
        <p class="t-c">解绑成功</p>
      </confirm>

    </div>
    <div class="card"
         v-else>
      <div class="nothing">
        <img src="../../assets/image/nothing.png">
        <p> 您还没有会员卡~</p>
        <div class="btn flex active"
             @click="$router.replace('/bind')">
          已有实体卡，去绑定
        </div>
        <div class="btn flex sec"
             @click="$router.push('/buy')">
          还没有卡，去购买
        </div>
      </div>
      <div class="notice pd40 col_999">
        <p>注意事项:</p>
        <p> 开卡流程：
          <p> 1.购买旅住卡后，2月4日按照付款先后顺序发货，顺丰发货。</p>
          <p> 2.旅住卡仅限本人使用，以绑定的身份证信息为准，只有开卡者本人在现场登记入住才享受旅住卡权益。</p>
          <p> 3.3月15日开放民宿客房预订，不支持电话预定，只接受网络预订，预订平台仅限XXX微信公众号平台。开放线上订房系统后，根据要求填写相关信息，完成对应操作即可。</p>
          <p> 4.旅住卡预定网络平台上的所有房型（独栋别墅除外）只要房源空置都可以预定。</p>
          <p> 5.一张卡一天只能享受一个房间优惠政策，但可连续入住（需提前网络预订）。</p>
          <p> 6.每个房间入住人数，入住规定等必须严格遵守国家酒店管理条例。</p>
          <p> 7.旅住卡以持卡者第一次办理入住计算开始时间，后续三年享受开卡权益，若三年内未绑定身份信息入住则此卡作废。</p>
          <p> 8.旅住卡有实体卡和电子卡两种形式，入住只需出示一种即可，绑定身份信息后，若卡遗失可申请补办，若遗失旅住卡者未注册电子会员卡或绑定身份信息，不予补办，后果自负。</p>
      </div>

    </div>
  </div>
</template>
<script>
import { Group, Cell, Confirm } from 'vux'
import { mapGetters, mapActions } from 'vuex'
import * as API from '../../api'
export default {
  components: {
    Group, Cell, Confirm
  },
  data () {
    return {
      name: '',
      sex: '',
      identityCard: '',
      cardNumber: '',
      residueTimes: '',
      btnShow: false,
      confirmshow: false,
      user: '',
      isbind: false
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created () {
    this.$http.get(API.user, {
      params: {
        openId: this.userInfo.openId
      }    }).then(res => {
      this.user = res.data
      if (this.user.isBind === 0) this.isbind = false
      if (this.user.isBind === 1) this.isbind = true
      if (this.user.isBind === 1 && this.user.totalResidueTimes <= 0) this.btnShow = true
      this.initUser(res.data)
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    ...mapActions(['initUser']),
    untying () {
      this.$http.get(API.unbind, {
        params: {
          openId: this.userInfo.openId
        }      }).then(res => {
        if (res.data.code === 0) {
          this.userInfo.isBind = 0
          this.initUser(this.userInfo)
          this.confirmshow = true
        }
      }).catch(err => {
        console.log(err)
      })
    }

  },
  // filters: {
  //   type (val) {
  //     console.log(val)

  //     switch (val) {
  //       case '1':
  //         return '三年卡'
  //       case '2':
  //         return '年卡'
  //       case '3':
  //         return '次卡'
  //     }
  //   }
  // }

}
</script>
<style lang="scss" scoped>
@import "../../assets/style/index.scss";
</style>
